<template>
<div class="order-detail">
    <div class="top">
        <img src="../assets/images/default-pay.png" alt="">
        <span class="text">
        <b>支付类型: <em>{{order.type}}</em></b><br/>
        <b>订单编号: <em>{{order.orderNum}}</em></b><br/>
        <b>支付时间: <em>{{order.createTime}}</em></b><br/>
        <b>支付状态: <em class="status" :style="{color: getColor(order.state)}">{{ getStateText(order.state) }}</em></b>
        </span>
        <span>
            <b class="price">30</b>
            <time v-if="order.state == 0" v-interval="order.lifeTime"></time>
        </span>
    </div>
    <div class="bottom">
        <a class="btn cancel" v-if="order.state == 0">取消</a>
        <a class="btn" v-if="order.state == 0">支付</a>
    </div>
</div>

</template>

<script>
export default {
    props: {
        order: {type: Object, required: true} ,
    },
    data() {
        return {
            detail: this.order ,
            colors: ["#ff9900", "#19be6b"],
            defaultColor: "#c5c8ce" ,
        }
    },
    methods: {
        getColor(state) {
            if (state == -1) return this.defaultColor ;
            return this.colors[state] ;
        },
        getStateText(state) {
            if (state == -1) return "已取消" ;
            if (state == 0) return "待支付" ;
            if (state == 1) return "已付款" ;
        },

    },
    directives: {
        interval: {
            mounted(el, binding) {
                // 获取绑定的 数据
                let val = binding.value ;  
                let playing = false ; 
                // 获取该组件的根节点
                let rootNode = el.parentNode.parentNode.parentNode; 
                function showData() {
                    if (val < 0) {
                        clearInterval(playing) ;
                        rootNode.querySelector(".status").innerText = "已取消" ;
                        rootNode.querySelector(".status").style.color = "#c5c8ce" ;
                        rootNode.querySelector(".bottom").innerText = "" ;
                        el.remove(); 
                    }else{
                        let min = Math.floor(val / 60 ); // 获取分钟数 
                        let sec = val % 60 ; // 获取秒数
                        el.innerText = (min < 10 ? ("0" + min) : min ) + ":" + ( (sec < 10) ? "0" + sec : sec ) ;
                        val-- ;
                    }
                }
                // 每间隔 1秒 较少 1 
                playing = setInterval(showData, 1000); 
                showData() ;
            },
        }
    }
}
</script>

<style scoped>
.order-detail {
   position: relative;
   width: 100%;
   height: 160px;
   background-color: rgba(212, 209, 198, 0.3);
   border-radius: 10px;
   margin-bottom: 20px;
}

.order-detail .top {
   position: relative;
   height: 120px; 
   display: flex;
}

.order-detail img {
   height: 100px;
   width: 100px;
   margin: 10px 30px;
}

.order-detail .text {
   display: block;
   line-height: 30px;
   width: 340px;
}

.order-detail .text b {
   font-weight: 400;
}

.order-detail .text em {
   font-weight: 800;
   font-style: normal;
}

.order-detail .text .status {
   display: inline-block; 
   width: 70px;
   height: 25px;
   font-size: 18px;
   padding: 3px 5px;
   border: 4px solid lightblue;
   text-align: center;
   position: relative;
   line-height: 24px;
   transform: rotate(-10deg);
}

.order-detail .text .status::after {
   position: absolute; 
   content: "";
   width: 68px;
   height: 23px;
   border: 2px solid rgb(197, 229, 240);
   left: 4px;
   top: 2px;
}


.order-detail time, .order-detail .price {
   display: block;
   text-align: right;
   line-height: 60px;
   padding-right: 30px;
   font-size:24px;
   width: 500px;
}

.order-detail .price::before {
   content: '￥';
}

.order-detail .bottom {
   position: relative;
   height: 40px; 
   text-align: right;
   padding-right: 30px;
}

.order-detail .bottom a{
   margin: 0 5px;
}

.order-detail .bottom a.cancel {
   background-color: rgb(155, 155, 155);
}

.order-detail .bottom a.cancel:hover {
   background-color: rgb(88, 88, 88);
}
</style>